<template>
    <div class="table-pro-page" v-loading="loading">
        <div class="table-pro-page-search">
            <ProForm
                :list="list"
                :data="data"
                ref="formRef"
                :hideFeedBack="true"
            >
                <n-gi :span="6">
                    <n-space>
                        <n-button type="primary" @click="onSearch">
                            <template #icon>
                                <i class="iconfont icon-search"></i>
                            </template>
                            搜索
                        </n-button>
                        <n-button @click="onReset">
                            <template #icon>
                                <i class="iconfont icon-reload"></i>
                            </template>
                            重置
                        </n-button>
                        <n-button
                            dashed
                            type="primary"
                            v-if="showAdd"
                            @click="onAdd"
                        >
                            <template #icon>
                                <i class="iconfont icon-plus"></i>
                            </template>
                            新增
                        </n-button>
                    </n-space>
                </n-gi>
            </ProForm>
        </div>
        <div class="table-pro-page-selected" v-if="checkedRowKeys.length && showSelected">
            <div class="table-pro-page-selected-label">
                已选择
                <span>{{ checkedRowKeys.length }}</span>
                项
            </div>
            <div class="table-pro-page-selected-actions">
                <slot name="selected"/>
            </div>
        </div>
        <n-data-table
            :columns="columns"
            :data="tableData"
            flex-height
            style="flex: 1"
            :single-line="false"
            :pagination="pagination"
            :row-key="rowKey"
            remote
            striped
            @update:checked-row-keys="updateChecked"
            :checked-row-keys="checkedRowKeys"
        />
    </div>
</template>
<script setup>
import { onMounted, toRefs, ref, computed, reactive } from "vue";
import ProForm from "@/common/ProForm/index.vue";
import Empty from "@/common/Empty/index.vue";
import { cloneDeep, isNull } from "lodash";

const props = defineProps({
    list: {
        type: Array,
        default: () => [],
    },
    columns: {
        type: Array,
        default: () => [],
    },
    api: {},
    rowKey: {},
    //是否显示新增按钮
    showAdd: {
        type: Boolean,
        default: () => false,
    },
    //是否显示已选择项
    showSelected: {
        type: Boolean,
        default: () => true,
    },
    //附加数据
    subData: {
        type: Object,
        default: () => {},
    },
    initLoad: {
        type: Boolean,
        default: () => true,
    },
});

const emits = defineEmits(["add", "delete"]);

const { list, columns, api, rowKey, initLoad } = toRefs(props);
const data = ref({});

let defalutVal = {};
onMounted(() => {
    list.value.map((v) => {
        defalutVal[v.key] = isNull(v.defaultVal) ? null : v.defaultVal;
    });
    data.value = cloneDeep(defalutVal);

    if (initLoad.value) {
        getData();
    }
});

const tableData = ref([]);
const pagination = reactive({
    itemCount: 0,
    page: 1,
    pageSize: 10,
    "page-sizes": [10, 20, 30, 50],
    "show-size-picker": true,
    "show-quick-jumper": true,
    prefix({ itemCount, startIndex, endIndex }) {
        return `显示第 ${itemCount ? startIndex + 1 : startIndex} 到第 ${
            endIndex !== itemCount ? endIndex + 1 : endIndex
        } 条记录，共 ${pagination.itemCount} 条记录`;
    },
    suffix() {
        return "页";
    },
    onChange: (page) => {
        pagination.page = page;
        getData();
    },
    onUpdatePageSize: (size) => {
        pagination.pageSize = size;
        pagination.page = 1;
        getData();
    },
});

//列表选中项
const checkedRowKeys = ref([]);
const updateChecked = (ids) => {
    checkedRowKeys.value = ids;
};

//点击搜索按钮
const onSearch = () => {
    pagination.page = 1;
    getData();
};

//加载状态
const loading = ref(false);
//获取数据
const getData = async () => {
    if (!api.value) return;
    checkedRowKeys.value = [];
    const _data = {
        current: pagination.page,
        pageSize: pagination.pageSize,
        ...data.value,
    };
    loading.value = true;
    let res = await api.value(_data);
    loading.value = false;
    if (res?.code === 200) {
        const { records, total } = res.data;
        tableData.value = records;
        pagination.itemCount = total;
    }
};

//点击重置按钮
const onReset = () => {
    data.value = cloneDeep(defalutVal);
};

//点击新增按钮
const onAdd = () => {
    emits("add");
};

//点击已选项的批量删除
const onDelete = () => {
    emits("delete", checkedRowKeys.value);
};

defineExpose({
    getData,
});
</script>
<style lang="less" scoped>
.table-pro-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    &-search {
        padding: 16px 12px;
        background: var(--image-error-bg-color);
        margin-bottom: 12px;
        border-radius: var(--border-radius);
    }
    &-selected {
        padding: 12px 16px;
        margin-bottom: 12px;
        background: var(--image-error-bg-color);
        // border: 1px solid var(--primary-color-1);
        border-radius: var(--border-radius);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &-label {
            color: var(--text-color-base-2);
            span {
                font-size: 15px;
                margin: 0 6px;
                color: var(--text-color-base);
            }
        }
        &-actions {
            // color: var(--error-color);
            // cursor: pointer;
            // &:hover {
            //     text-decoration: underline;
            // }
        }
    }
}
</style>
